<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Amaze UI Admin form Examples</title>
<meta name="description" content="这是一个form页面">
<meta name="keywords" content="form">
<% include("/common/inc/_css.html"){} %>
<style type="text/css">
#btnTypeSave {
	margin-left: 25%;
}
.am-form-group{
	margin-left: 9%;
}

#name{
	color: red;
}
.am-checkbox{
	margin-left: 9%;
}
</style>
</head>
<body>
	<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

	<% include("/common/inc/_header.html"){} %>

	<div class="am-cf admin-main">

		<% include("/common/inc/_menu.html"){} %>

		<!-- content start -->
		<div class="admin-content">
			<div class="admin-content-body">
				<div class="am-cf am-padding am-padding-bottom-0">
					<div class="am-fl am-cf">
						<strong class="am-text-primary am-text-lg">表单</strong> / <small>form</small>
					</div>
				</div>

				<hr>

				<form class="am-form" method="post" id="doc-vld-msg">
					<fieldset>
						<div class="am-form-group">
						
							<label for="doc-vld-name-2-1">角色名称：&nbsp;&nbsp;&nbsp;<span id="name">${role.role_name!}</span></label>
						</div>
				
					<br/>

						<div class="am-form-group">
						
							<label for="doc-vld-name-2-1">分配菜单(至少分配一项)：</label>
							
							
							<% for(var func in funcs!){ %>
							
							<label class="am-checkbox am-secondary">
							  <input type="checkbox" value="${func.id}" name="funcIds" data-am-ucheck required minchecked="1"> ${func.func_name}
							</label>
							
							<% } %>
						</div>

							<div class="am-margin">
								<button id="btnTypeSave" type="submit"
									class="am-btn am-btn-primary am-btn-xs btn-loading-example"
									data-am-loading="{spinner: 'circle-o-notch', loadingText: '提交中...', resetText: '提交保存'}">
									立即提交</button>

								<button type="button" class="am-btn am-btn-primary am-btn-xs">放弃保存</button>
							</div>
					</fieldset>
				</form>


			</div>
			<footer class="admin-content-footer">
				<hr>
				<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed
					under MIT license.</p>
			</footer>
		</div>
		<!-- content end -->

	</div>

	<a href="#"
		class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
		data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

	<footer>
		<hr>
		<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under
			MIT license.</p>
	</footer>

	<% include("/common/inc/_js.html"){} %>
	<!-- ajax提交表单 -->
	<script
		src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#btnTypeSave").click(function() {
				var isFormValid = $('#doc-vld-msg').validator('isFormValid');
				if (!isFormValid) {
					$btn.removeClass("am-disabled");
					return;
				}
				$(".am-form").ajaxSubmit({
					success : function(data) {
						/* console.log(data);
						if (data.errorCode != "0") {
							console.log(data.errorMsg);
							return;
						} */
						//跳转页面
						window.location.href = "${ctxPath}/auth/role/list";
					}
				})
				//防止表单自动提交
				return false;
			})
		});
	</script>
	<script type="text/javascript">
		$('.btn-loading-example').click(function() {
			var $btn = $(this)
			$btn.button('loading');
			setTimeout(function() {
				$btn.button('reset');
			}, 1000);
		});
	</script>

</body>
</html>
